<template>
  <customFormInput
    :item="item"
    :disabled="disabled"
    v-if="item['@attributes'].type === 'single' && item['@attributes'].valueType === 'text'"
  ></customFormInput>
  <customFormInputNumber
    :item="item"
    :disabled="disabled"
    v-else-if="item['@attributes'].type === 'single' && item['@attributes'].valueType === 'numeric'"
  ></customFormInputNumber>
  <div v-else-if="item['@attributes'].type === 'multiComplex' && item['@attributes'].valueType === 'object'">
    <div class="title">{{ item['@attributes'].name }}</div>
    <customForm
      :areaList="areaList"
      :disabled="disabled"
      v-for="(e, i) of item.attributes.attribute"
      :item="e"
    ></customForm>
  </div>
  <customFormSelect
    :item="item"
    :disabled="disabled"
    v-else-if="
      (item['@attributes'].type === 'single' || item['@attributes'].type === 'multi') &&
        item['@attributes'].valueType === 'enum'
    "
  ></customFormSelect>
  <div v-else-if="item['@attributes'].type === 'complex' && item['@attributes'].valueType === 'object'">
    <div class="title">{{ item['@attributes'].name }}</div>
    <customForm
      :areaList="areaList"
      :disabled="disabled"
      v-for="(e, i) of item.attributes.attribute"
      :item="e"
    ></customForm>
  </div>
  <div
    v-else-if="
      item['@attributes'].type === 'multi' &&
        item['@attributes'].valueType === 'text' &&
        item['@attributes'].id === 'area'
    "
  >
    <customFormArea :areaList="areaList" :item="item" :disabled="disabled"></customFormArea>
  </div>
  <div v-else>
    <h3>下列暂定义</h3>
    <p>名称：{{ item['@attributes'].name }}</p>
    <p>类型1：{{ item['@attributes'].type }}</p>
    <p>类型2：{{ item['@attributes'].valueType }}</p>
  </div>
</template>

<script>
export default {
  name: 'customForm',

  components: {
    customFormInput: () => import('./formInput.vue'),
    customFormInputNumber: () => import('./formInputNumber.vue'),
    customFormSelect: () => import('./formSelect.vue'),
    customFormArea: () => import('./formArea.vue')
  },

  props: {
    item: {
      type: Object,
      default() {
        return null
      }
    },

    areaList: {
      type: Array,
      default() {
        return []
      }
    },

    disabled: {
      type: Boolean
    }
  },

  computed: {},

  methods: {}
}
</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 14px;
}
</style>
